<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炫彩小球</title>
  <style>
    canvas {
      border: 1px solid #000;
      background-color: rgb(180, 180, 180);
    }
  </style>
</head>

<body>
  <canvas id="myCanvas" width="1500" height="700"></canvas>
  <script>
    // 获取画布
    const canvas = document.getElementById("myCanvas");
    // 获取上下文
    const ctx = canvas.getContext("2d");

    // 维护小球数组
    const ballArr = [];

    // 写一个类
    function Ball(x, y, r) {
      // 初始位置坐标
      this.x = x;
      this.y = y;
      // 初始半径
      this.r = r;
      // 设置随机颜色
      this.color = getRandomColor();
      // 设置x行进方向
      this.dx = parseInt(Math.random() * 10) - 5;
      // 设置y行进方向
      this.dy = parseInt(Math.random() * 10) - 5;
      // 添加类实例本身
      ballArr.push(this);
    }

    // 渲染小球
    Ball.prototype.render = function () {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
      ctx.fillStyle = this.color;
      ctx.fill();
    }

    // 运动小球
    Ball.prototype.update = function () {
      // 小球的运动
      this.x += this.dx;
      this.y += this.dy;
      this.r -= 0.4;
      // TODO: 如果小球的半径小于0了, 需要从数组中删除
      if (this.r < 0) {
        this.remove();
      }
    }

    Ball.prototype.remove = function () {
      for (let i = 0; i < ballArr.length; i++) {
        if (ballArr[i] == this) {
          ballArr.splice(i, 1);
        }
      }
    }

    // 在canvas内部监听鼠标移动事件: 移动时创建小球
    canvas.addEventListener("mousemove", function (event) {
      new Ball(event.offsetX, event.offsetY, 50);
    })


    // 通过定时器进行动画渲染
    setInterval(() => {
      // console.log(ballArr);
      // 动画的逻辑、清屏-更新-渲染
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < ballArr.length; i++) {
        // 小球的更新与渲染
        ballArr[i].update();
        ballArr[i].render();
      }
    }, 10);

    // 随机颜色
    function getRandomColor() {
      const allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
      const allTypeArr = allType.split(",");
      let color = "#";
      // 十六进制 6位
      for (let i = 0; i < 6; i++) {
        console.log(ballArr.length);
        let random = parseInt(Math.random() * allTypeArr.length);
        color += allTypeArr[random];
      }
      // console.log("随机颜色", color);
      return color;
    }

    // 测试
    // getRandomColor();
  </script>
</body>

</html>